<template>
  <div class="article-page">
<van-search
  placeholder="请输入小区或地址"
   @search="onSearch"
   show-action
>
<template #label>
  <span @click="location" class="right-location">{{!city ? '北京' : city}} ▼</span>
</template>
  <template #action>
    <div @click="onSearch">
      <van-icon name="map-marked" />
    </div>
  </template>
</van-search>
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item><img src="http://liufusong.top:8080/img/swiper/1.png" alt=""></van-swipe-item>
  <van-swipe-item><img src="http://liufusong.top:8080/img/swiper/2.png" alt=""></van-swipe-item>
  <van-swipe-item><img src="http://liufusong.top:8080/img/swiper/3.png" alt=""></van-swipe-item>
</van-swipe>
<div class="tabbar">
  <van-tabbar :fixed="false" class="LookingHouse"  :border="false" >
  <van-tabbar-item icon="wap-home">整租</van-tabbar-item>
  <van-tabbar-item icon="friends">合租</van-tabbar-item>
  <van-tabbar-item icon="map-marked">地图找房</van-tabbar-item>
  <van-tabbar-item icon="shop" to="/add">去出租</van-tabbar-item>
</van-tabbar>

</div>

 <div class="group">
<div class="nav">
  <h4>租房小组</h4>
  <p>更多</p>
</div>
<div class="horizontal">
  <van-grid direction="horizontal" :column-num="2" :gutter="10">
 <!-- <div v-for="item in groupslist" :key="item.id"> -->
   <van-grid-item :icon="item.imgSrc"  v-for="item in groupslist" :key="item.id">
    <template #text>
      <div class="horizontal-text">
        <p>{{item.title}}</p>
      <p>{{item.desc}}</p>
      </div>
    </template>
     </van-grid-item>
 <!-- </div> -->
</van-grid>
</div>
  </div>
  </div>
</template>

<script>
import { getgroups } from '@/api/listItem'
import { getTokenID } from '@/utils/stroageid'

export default {
  name: 'article-page',
  data () {
    return {
      label: '',
      city: '',
      groupslist: []
    }
  },
  async created () {
    this.city = localStorage.getItem('city')
    const { body } = await getgroups(getTokenID())

    this.groupslist = body
  },
  methods: {
    onSearch () {
      this.$router.push('/map')
    },
    location () {
      this.$router.push('/city')
    }
  }
}
</script>

<style lang="less" scoped>
.article-page{
  position: relative;
  height: 215px;
}
.right-location{
  border-right: 1px solid;
}
.LookingHouse{
  position: absolute;
  top: 105%;
  .van-tabbar-item{
    line-height: 35px;
  }
}
 .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    // line-height: 150px;
    text-align: center;
    // background-color: #39a9ed;
    img{
      width: 100%;
      height: 212px;
    }
  }
  .van-search{
    position: absolute;
    top: 25px;
    width: 100%;
    padding: 0 10px;
    z-index: 2;
  }
  .group{
    position: relative;
    top: 70px;
    background-color: #f6f5f6;
    overflow: hidden;
    padding: 0 10px;
    padding-bottom: 20px;
    // margin-top: 100px;
    .nav{
      height: 37px;
      h4{
            position: relative;
    margin: 15px 0 15px 10px;
    font-size: 15px;
      }
      p{
       color: #787d82;
    position: absolute;
    right: 15px;
    top: 4px;
    font-size: 14px;
    font-weight: 400;
      }
    }
  }
  .horizontal-text{
    p{
font-size: 14px;
margin-left: 15px;
margin-top: 0px;
margin-bottom: 0px;
    }
  }
</style>
